{% extends "layout/project.html" %}
{% load static %}

{% block css1 %}
<link rel="stylesheet" href="{% static 'plugins\editor.md-master\css\editormd.min.css' %}">
<style>
    .editormd-fullscreen {
        z-index: 1500;
    }
</style>
{% endblock %}
{% block content1 %}
<div class="container-fluid wiki-container">
    <div class="row">
        <div class="container-fluid">
            <div class="row flex-nowrap ">
                <!-- 左侧大纲 (始终显示，响应式宽度) -->
                <div class="col-12 col-md-4 col-xxl-3"
                    style="border: 1px solid #DEE2E6; max-height: calc(100vh - 100px); overflow-y: auto;">
                    <div class="d-flex justify-content-between align-items-center p-3">
                        <h5 class="mb-0"><i class="bi-journal-bookmark nav-icon"></i>文档大纲</h5>
                    </div>

                    <ul id="catalog" class="p-3">
                        <!-- 大纲内容 -->
                    </ul>

                </div>

                <!-- 右侧主内容 -->
                <div class="col-12 col-md-8 col-xxl-9" style="min-height: 100vh;">
                    <div class="p-3" style="border: 1px solid #DEE2E6;height: calc(100vh - 100px); overflow-y: auto;">
                        <form method="post">
                            {% csrf_token %}
                            <!-- 操作按钮行 -->
                            <div class="d-flex justify-content-between align-items-center mb-4 mt-2">
                                <div class="d-flex gap-2">
                                    <button class="btn btn-outline-success btn-sm">
                                        <i class="bi bi-file-plus"></i> 新建
                                    </button>
                                    <button class="btn btn-outline-secondary btn-sm">
                                        <i class="bi bi-pencil"></i> 编辑
                                    </button>
                                    <button class="btn btn-outline-danger btn-sm">
                                        <i class="bi bi-trash"></i> 删除
                                    </button>
                                </div>

                                <!-- 保存按钮 -->
                                <button type="submit" class="btn btn-primary btn-sm ms-2">
                                    <i class="bi bi-save"></i> 保存
                                </button>
                            </div>

                            <!-- 表单字段 -->
                            {% for field in form %}
                            {% if field.name == "content" %}
                            <div class="form-group">
                                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                <div id="editor">
                                    {{ field }}
                                </div>
                                <span class="error-msg">{{ field.errors.0 }}</span>
                            </div>
                            {% else %}
                            <div class="form-group">
                                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                {{ field }}
                                <span class="error-msg">{{ field.errors.0 }}</span>
                            </div>
                            {% endif %}
                            {% endfor %}
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block js1 %}
<script src="{% static 'plugins\editor.md-master\editormd.min.js' %}"></script>
<script>
    let WIKI_DETAIL_URL = "{% url 'wiki' project_id=request.tracer.project.id %}"
    let WIKI_UPLOAD_URL = "{% url 'wiki_upload' project_id=request.tracer.project.id %}"
    $(function () {
        initCatalog();
        initEditorMd();
    });
    // 初始化wiki目录
    function initCatalog() {
        $.ajax({
            url: "{% url 'wiki_catalog' project_id=request.tracer.project.id %}",
            type: "GET",
            dataType: "JSON",
            success: function (res) {
                if (res.status) {
                    $('#catalog').empty(); // 清空旧内容
                    $.each(res.data, function (index, item) {
                        let href = WIKI_DETAIL_URL + "?wiki_id=" + item.id;// 生成链接地址
                        const $li = $("<li>")
                            .addClass("nav-item")          // 添加 Bootstrap 导航项类
                            .attr('id', 'id_' + item.id)    // 设置唯一 ID（如 id_123）
                            .append(
                                $("<a>")
                                    .addClass("nav-link")   // Bootstrap 导航链接样式
                                    .attr('href', href || '#')  // 链接地址（默认#）
                                    .text(item.title)       // 显示标题
                            )
                            .append($("<ul>"));            // 附加一个空的 <ul> 容器

                        if (!item.parent_id) {
                            $('#catalog').append($li);     // 无 parent_id 则添加到根目录
                        } else {
                            $("#id_" + item.parent_id).children("ul").append($li); // 有 parent_id 则作为子项
                        }
                    });
                }
                else {
                    alert("初始化目录失败");
                }
            }
        })
    }
    // 初始化Markdown编辑器(textare转换为编辑器)
    function initEditorMd() {
        editormd('editor', {
            placeholder: "请输入内容",
            height: 500,
            path: "{% static 'plugins\\editor.md-master\\lib\\' %}",
            imageUpload: true,
            imageFormats: ["jpg", "png", "gif", "jpeg"],
            imageUploadURL: WIKI_UPLOAD_URL
        })
    }
</script>
{% endblock %}